<template>
	<view>
		<view class="review fonts u-skeleton">
			<view class="IRT " @touchmove.stop="" @tap="irtClose" v-if="irtIsShow">
				<image src="http://hz-huibenxia.oss-cn-shenzhen.aliyuncs.com/mp/trail/irt-dialog.png" mode="widthFix"></image>
			</view>
			<view class="titles u-skeleton-fillet">
				<view style="margin-left: -2em">{{ title[0] }}</view>
				<view style="margin-left: 2em;margin-top: 0.5em;">{{ title[1] }}</view>
			</view>
			<view class="chc u-skeleton-rect" @tap="chcTap">了解CHC理论></view>
			<view class="center  u-skeleton-fillet">
				<view class="title">{{ preview.profile.abilityName }}能力:</view>
				<view class="content">{{ preview.profile.abilityIntroduction }}</view>
			</view>
			<view class="top  u-skeleton-fillet">
				<view class="title" @tap="irtTap">
					测评报告
					<image src="../../static/IRT.png"></image>
				</view>
				<u-circle-progress
					style="margin-top: 20rpx;margin-left: -300rpx;color:#FDCB5E;font-size: 33rpx;"
					v-if="!irtIsShow"
					width="280"
					border-width="50"
					active-color="#FDCB5E"
					:percent="percent"
				>
					{{ percent }}%
				</u-circle-progress>
				<view class="list">
					<view v-for="(item, index) in preview.profile.abilityItems" :key="index">
						{{ item.ability }}：
						<text class="color">{{ item.judge }}</text>
					</view>
				</view>
				<view class="content">
					孩子{{ preview.profile.abilityName }}{{ preview.profile.abilityName.indexOf('能力') > -1 ? '' : '的能力' }}超越了
					<text class="color" style="font-size: 35rpx;font-family: '';">{{ percent }}%</text>
					的小朋友,{{ preview.profile.compareText }}同龄小朋友的平均水平。
				</view>
			</view>
			<view class="center bottomEnter  u-skeleton-fillet">
				<view class="title">学业表现:</view>
				<view class="content" v-html="preview.profile.summary.replace(/\n/g, '<br>&emsp;&emsp;')"></view>
			</view>
			<view class="center bottomEnter  u-skeleton-fillet">
				<view class="title">成长建议:</view>
				<view class="content" v-html="preview.profile.suggest.replace(/\n/g, '<br>&emsp;&emsp;')"></view>
			</view>
			<view class="center bottomEnter  u-skeleton-fillet">
				<view class="title">学习推荐:</view>
				<view class="column-container">
					<view
						class="column"
						hover-class="touch"
						hover-start-time="0"
						hover-stay-time="300"
						@tap="toCourse(item)"
						v-for="(item, index) in preview.recommendCourses"
						:key="index"
					>
						<view class="image"><ImageLoad :src="item.coverUrl" borderRadius="30" /></view>
						<text class="text">{{ item.name }}</text>
					</view>
				</view>
			</view>
			<view class="share">
				<view class="shareTo" @tap="message" hover-class="touch" hover-stay-time="300">
					<button open-type="share" style="opacity: 0;position: absolute;width: 250rpx;">转发</button>
					<u-icon name="zhuanfa"></u-icon>
					分享给好友
				</view>
				<view class="shareTo" @tap="friendTap" hover-class="touch" hover-stay-time="300">
					<u-icon name="moments"></u-icon>
					分享给朋友圈
				</view>
			</view>
		</view>
		<u-skeleton :loading="loading" :animation="true" bgColor="#FFF"></u-skeleton>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: [],
			preview: {
				profile: {
					estimateHeader: '了解孩子的成长水平\n负责任的家长都在测',
					abilityItems: [
						{
							ability: '词汇识别',
							judge: '优'
						},
						{
							ability: '知识获取',
							judge: '优'
						},
						{
							ability: '理解语言',
							judge: '优'
						},
						{
							ability: '阅读理解',
							judge: '优'
						}
					],
					abilityName: '语言发展',
					abilityIntroduction: '语言发展能力是晶体智力的核心能力，是儿童对词语、常用语、句子等的理解能力。',
					compareText: '高于',
					summary:
						'在阅读方面：词汇掌握量大，能很好地理解词汇和句子的意思，还能阅读一些情节曲折的故事。\n在数学方面：能对数学公式和数学概念进行很好的消化。\n在写作方面：日记和作文中词汇运用恰当，甚至还能用一些优美的词语，写得生动有趣。\n在日常交流方面：能够充分理解别人讲话的内容，甚至能根据言语信息进行推理，也知道如何更好地表达自己的想法。',
					suggest:
						'在日常生活中引导孩子多看、多听、多说，为孩子营造一个丰富而鲜活的语言环境。\n让孩子接触更多种类的词汇，除了让孩子理解词汇本身的含义，还引导孩子理解词汇与词汇之间的关系。\n让孩子多阅读，阅读素材尽量丰富多样，同时，还可适当提高阅读难度，并设置一些推理性的问题。'
				}
			},
			percent: 0,
			timer: null,
			irtIsShow: false,
			loading: true,
			share: {}
		}
	},
	onLoad() {
		this.loadData()
	},
	beforeDestroy() {
		clearInterval(this.timer)
	},
	onShareAppMessage() {
		return {
			title: '孩子的认知优势，决定孩子的未来。赶紧测一测吧！',
			path: '/pages/evaluate/evaluate?' + this.share.sceneString,
			imageUrl: 'https://hz-huibenxia-mp.oss-cn-shenzhen.aliyuncs.com/share/reviewShare.png'
		}
	},
	methods: {
		message: function() {
			if (!this.share.neededToAuthorizeNotify) return
			wx.requestSubscribeMessage({
				tmplIds: [this.share.missionFinishMessageTemplateId],
				success: res => {
					this.$post(this.api.authorizeNotify, { deviceUuid: this.deviceUuid })
					this.share.neededToAuthorizeNotify=false
				}
			})
		},
		loadData: async function() {
			//用户deviceUuid没有获取则轮训获取 直到获取成功
			if (!this.deviceUuid) {
				const timer = setTimeout(() => {
					this.loadData()
				}, 300)
				this.$once('hook:beforeDestory', function() {
					clearTimeout(timer)
				})
				return
			}
			const json = {
				deviceUuid: this.deviceUuid,
				sceneString: this.sceneString
			}
			const [data, err] = await this.awaitWarp(this.$post(this.api.loadScore, json))
			this.preview = data
			const [shareData, shareErr] = await this.awaitWarp(this.$post(this.api.shareReady, { deviceUuid: this.deviceUuid }))
			this.share = shareData
			this.title = [this.preview.profile.estimateHeader.split('\n')[0], this.preview.profile.estimateHeader.split('\n')[1]]
			this.loading = false
			this.percent = Math.floor(this.preview.score * 100)
		},
		chcTap: function() {
			this.$Router.push({ name: 'chc' })
		},
		irtTap: function() {
			this.irtIsShow = true
		},
		irtClose: function() {
			this.irtIsShow = false
		},
		toCourse: function(item) {
			this.$Router.push({ name: 'courseDetail', query: { item: JSON.stringify(item) } })
		},
		friendTap: function() {
			this.message()
			uni.previewImage({
				urls: [this.share.shareImageUrl],
				longPressActions: true,
				success: () => {
					uni.showToast({
						title: '长按保存图片',
						icon: 'none',
						duration: 2000
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="stylus">
.color
	color #FDCF65 !important
.review
	width 100vw
	min-height 100vh
	position relative
	display flex
	flex-direction column
	align-items center
	background-color white
	margin-top 40rpx
	border-radius 65rpx
	color #3E3A39
	padding-bottom 80rpx
	.IRT
		position fixed
		top 0
		background-color rgba(0, 0, 0, 0.4)
		width 100vw
		height 100vh
		display flex
		justify-content center
		align-items center
		z-index 99
		image
			width 700rpx
			margin-top -100rpx
			animation outIn 300ms
			animation-fill-mode forwards
	.titles
		width 680rpx
		background #FDCB5E
		padding 40rpx 0
		border-radius 60rpx
		margin-top 35rpx
		color white
		font-size 38rpx
		text-align center
	.chc
		color #3192FE
		margin-left auto
		font-size 25rpx
		line-height 30rpx
		margin-top 10rpx
		margin-right 70rpx
		border-bottom 1rpx solid #3192FE
	.top
		width 680rpx
		height 525rpx
		position relative
		background white
		display flex
		flex-direction column
		align-items center
		margin-top 35rpx
		border-radius 65rpx
		border 1rpx solid #EAE9E7
		box-sizing border-box
		box-shadow 0 0 5rpx #E1E1E1
		image
			width 30rpx
			height 30rpx
			line-height 15rpx
			float right
			margin-left 5rpx
			display inline
		.title
			font-size 30rpx
			margin-top 50rpx
			position relative
			margin-right auto
			margin-left 70rpx
		.title::before
			content ''
			position absolute
			width 0.4em
			height 0.7em
			left -0.7em
			top 0.15em
			background #FDCB5E
			border-radius 40rpx
		.list
			width 40%
			left 58%
			bottom 165rpx
			position absolute
			font-size 25rpx
			line-height 40rpx
		.content
			position absolute
			height 20%
			bottom 25rpx
			left 10%
			width 80%
			font-size 30rpx
	.center
		width 680rpx
		padding-bottom 50rpx
		border-radius 65rpx
		border 1rpx solid #EAE9E7
		box-sizing border-box
		box-shadow 0 0 5rpx #E1E1E1
		position relative
		margin-top 35rpx
		background white
		.content
			margin-top 20rpx
			font-size 30rpx
			margin-left 60rpx
			width 85%
			text-indent 2em
			line-height 40rpx
		.title
			font-size 30rpx
			margin-top 50rpx
			position relative
			margin-right auto
			margin-left 70rpx
			color #FFC268
		.minTitle
			font-size 30rpx
			margin-top 50rpx
			position relative
			margin-right auto
			margin-left 70rpx
			color #FFC268
		.title::before
			content ''
			position absolute
			width 0.4em
			height 0.7em
			left -0.7em
			top 0.15em
			background #FDCB5E
			border-radius 40rpx
		.column-container
			width 600rpx
			margin-left 40rpx
			height 500rpx
			display flex
			flex-wrap wrap
			justify-content center
			align-items center
			.column
				width 270rpx
				height 220rpx
				margin 30rpx 15rpx
				display flex
				flex-direction column
				transition all 0.3s
				.image
					width 280rpx
					height 220rpx
					position relative
					overflow hidden
					transform translate3d(0, 0, 0)
					border-radius 40rpx
				.text, color #A8A7A7
					font-size 25rpx
					margin-top 10rpx
					text-align center
	.share
		display flex
		margin-top 50rpx
		.shareTo
			width 250rpx
			height 80rpx
			font-size 30rpx
			line-height 80rpx
			text-align center
			background #FED46B
			color white
			margin 20rpx
			border-radius 20rpx
			transition all 0.3s
</style>
